<template>
	<!--出题界面-->




	<view class="body">

		<!--选项卡start-->
		<view class="fenduanqi-all">

			<uni-section title="实心标签" type="line">
				<view class="fenduanqi-padding">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<!--单独的一个list，for循环产生 start-->
						<view class="choose-my-public">
					
							<view class="list-one-by-one" v-for="(item,index) in UserPuzzleList" :key="index">
								
								
								<view class="puzzle-title"><text>{{item.id}}-{{item.puzzleName}}</text></view>
								<view class="tag-all">
								
									<!--修改和删除的标签的button-->
									<uni-section title="空心标签" subTitle="使用 inverted 属性显示空心表签" type="line" padding>
										<view class="example-body tag-so">
											<!--星星展示的区域start-->
											<view class="stars-show-container">
												<uni-icons type="star" size="40" color="red"></uni-icons>
												<text>{{item.star}}</text>
											</view>
											<!--星星展示的区域end-->
											<!--时间序列化start-->
												<view class="list-time-show">
													{{formatUpdateTime(item.updateTime)}}
												</view>
											<!--时间序列化end-->
											<view class="tag-view">			
												<uni-tag :inverted="true" text="修改" type="primary" @click="unitag_change()">
												</uni-tag>
											</view>
											<view class="tag-view">
												<uni-tag :inverted="true" text="删除" type="error"    />
											</view>
										</view>
									</uni-section>



								</view>
							</view>

						</view>
						<!--单独的一个list，for循环产生end-->
						
					</view>
		
					<view v-if="current === 1"><text class="content-text">已审核</text></view>
					<view v-if="current === 2"><text class="content-text">待审核</text></view>
				</view>
			</uni-section>


	<!--出题按钮start--new  (固定形态)-->
		<view class="btn-add-new-container">
			<button class="btn-add-new">
				出题
			</button>
		</view>
		<!--出题按钮end--new-->
		</view>
		<!--选项卡end-->

		
	

	</view>

</template>
<style lang="scss">
	.body{
		position: relative;
	}
	.btn-add-new-container{
		
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: auto;
	}
	.btn-add-new{
		width: 300rpx;
		color: white;
		background-color: #007AFF;
		border-radius: 20%;
		font-weight: bold;
		bottom: 30rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.stars-show-container{
		position: absolute;
		bottom:10rpx;
		left: -250rpx;
		flex:1;
	}
	.fenduanqi-all {
		padding-top: 30rpx;
		height: 100%;
		width: 90%;
		margin: auto;
		box-sizing: border-box;
		
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
		align-items: center;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		justify-content: flex-start;
		align-items: center;
		height: 90%;
		width: 100%;
		
		text-align: center;

	}



	.list-time-show{
		flex:3;
	}
	.title-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tag-view {
		margin: 10rpx;
		flex:2;
	}

	.btn-view {
		height: 100rpx;
	}

	.tag-so {
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.puzzle-title {
		flex: 2;
		align-items: center;
		display: flex;
		margin-left: 10rpx;
		justify-content: center;
	}

	.tag-all {
		box-sizing: border-box;

		padding: 20rpx;
		justify-content: flex-end;
		flex: 1;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.choose-my-public{
		padding-top: 20rpx;
		margin: auto;

		width: 100%;
		position: relative;
		
	}
	.list-one-by-one {

		
		
		
		display: flex;
		flex-direction: column;
		height: 200rpx;
		width: 700rpx;
		border-radius: 8%;
		margin: auto;
		margin: 20rpx;
		box-sizing: border-box;
		background-color: white;
	}

	.add-test-btn {
		margin-top: 20rpx;
		margin-right: 10rpx;
		color: white;
		background-color: #da2929;
		font-weight: bold;
		font-size: 25rpx;
		width: 180rpx;
		border-radius: 25%;
		float: right;

		transition: transform 0.00002s;
	}

	.add-test-btn:active {
		transform: translateY(0.0001rpx);
	}
</style>
<script>
	import {
		showUserList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				//获取到的用户提交的 puzzle （全部）
				UserPuzzleList: [],
				id: -1,
				listshowtime:'',
				//默认传递给页面的id是-1，可省去。。。。



				//选项卡start
				items: ['全部', '已审核', '待审核'],
				current: 0,
				styleType: 'button',
				colors: ['#007aff', '#4cd964', '#dd524d'],
				colorIndex: 0,
				activeColor: '#007aff',
				////选项卡end
			}
		},
		created() {

		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.id = option.id;
			this.showUserListE();
		},

		methods: {




			//谜题状态 分段器的函数start
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			//谜题状态 分段器的函数end


			//获取到用户发布的谜题的列表start
			async showUserListE() {
				console.log(this.$store.state.userInfo.wxtoken)
				try {
					let res = await showUserList(this.id); 
					// 使用await等待异步函数的执行结果
					//将日期转换为字符串
					this.UserPuzzleList = res; // 将结果赋值给UserPuzzleList
					console.log(JSON.stringify(this.UserPuzzleList));
				} catch (error) {
					console.error('Error fetching user puzzle list:', error);
				}

			},
			//获取到用户发布的谜题的列表start--end
			
			//将时间字符串化start
			formatUpdateTime(updateTime){
				const date= new Date(updateTime[0],updateTime[1] - 1,updateTime[2])
				
				  //const options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
				  return date.toLocaleDateString('en-US');

				//return date.toISOString();
				
			},
			//将时间字符串化end
		}
	}
</script>